<template>
	<view class="course">
		<!-- 占位 -->
		<ul class="nav">
			<li>智能选岗</li>
			<li>综合</li>
			<li class="active">课程</li>
			<li>题库</li>
			<li>测评</li>
			<li>简历模版</li>
		</ul>
		<div class="banner">
			<img src="../../static/course/course_banner.png" class="banner_img"/>
		</div>
		<div class="nav2">
			<!-- 一级导航 -->
			<div class="nav2_subnav1">
				<span 
					v-for="(item) in data.firstLevelNavs"
					:key="item.id"
					@tap="selectFirstLevel(item.id)"
					:class="['nav2_subnavCon',{'subNavActive':data.currentFirstLevelId === item.id}]"
				>{{ item.name }}
				</span>
			</div>
			
			<!-- 二级导航 -->
			<div class="nav2_subnav2">
				<span 
					v-for="item in data.secondLevelNavs[data.currentFirstLevelId]"
					:key="item.id"
					:class="['nav2_subnavCon',{'subNavActive':data.currentSecondLevelId === item.id}]"
					@tap="selectSecondLevel(item)"
				>{{item.name}}</span>
			</div>
		</div>
		
		<ul class="course-list">
			<li 
				v-for="(item) in data.contentData" 
				:key="item.id"  
				class="course-list-li" 
				@tap="goToCourseDetails(item.id)">
				<div class="course-list-left">
					<img :src="item.cover"  class="course-list-img" alt="" />
				</div>
				<div class="course-list-right">
					<div class="text1">{{item.name}}</div>
					<div class="text2">{{item.synopsis}}</div>
					<div class="course-list-button">
						<div class="button1">
							<span class="iconfont" style="color:#13aeb2;font-size:32rpx;">&#xe615;</span>
							<span>&nbsp;{{item.studyCatalogues.length}}课时</span>
						</div>
						<div class="button2">{{item.category}}</div>
					</div>
				</div>
			</li>
			
		</ul>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	import { apiCourseDetail, apiCourseCatalogue, apiCompletedStudy,apiCourseList } from '@/api/goods'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	onLoad((options: { id?: string }) => {
	  console.log('页面加载，参数:', options)
	  fetchContentData('行测')
	})
	
	
	const ipt_content = ref("");
	

	const data = ref({
		// 一级导航数据
		firstLevelNavs: [
		  { id: 1, name: '公务员/央国企' },
		  { id: 2, name: 'AIGC' },
		  { id: 3, name: '鸿蒙开发' },
		  { id: 4, name: '项目研发' },
		  { id: 5, name: '测试数据1' },
		  { id: 6, name: '测试数据2' }
		],
		// 二级导航数据
		secondLevelNavs: {
		  1: [ // 分类 [公务员/央国企] 下的二级导航
			{ id: 11, name: '行测' },
			{ id: 12, name: '申论' },
			{ id: 13, name: '公安' }
		  ],
		  2: [ // 分类 [AIGC] 下的二级导航
			{ id: 21, name: 'AIGC+PS' },
			{ id: 22, name: 'AIGC商业视觉设计' },
			{ id: 23, name: 'AIGC品牌平面设计' },
			{ id: 24, name: 'AIGC电商全案设计' },
			{ id: 25, name: 'AIGC三位建模与渲染' },
		  ],
		  3: [ // 分类 [鸿蒙开发] 下的二级导航
			{ id: 31, name: '鸿蒙-基础' },
			{ id: 32, name: '鸿蒙-应用核心' },
			{ id: 33, name: '鸿蒙-原生AI应用开发' },
			{ id: 34, name: '鸿蒙-AI一多应用开发' },
			{ id: 35, name: '鸿蒙-混合开发' }
		  ],
		  4: [ // 分类 [项目研发] 下的二级导航
			{ id: 41, name: 'APP定制开发' },
			{ id: 42, name: '小程序定制开发' },
			{ id: 43, name: '高端定制网站' }
		  ]
		},
		// 当前选中的一级导航ID
		currentFirstLevelId: 1,
		// 当前选中的二级导航ID
		currentSecondLevelId: 11,
		// 内容数据
		contentData: null
		
	})
	const goToCourseDetails = (id:any) => {
		uni.navigateTo({
			url:'/pages/courseDetails/courseDetails?id='+id
		})
	}
	// 选择一级导航
	const selectFirstLevel = (id: any) => {
		data.value.currentFirstLevelId = id;
		data.value.currentSecondLevelId = 11; // 重置二级选择
	}
	
	// 选择二级导航
	const selectSecondLevel = (item:any) => {
		data.value.currentSecondLevelId = item.id;
		// data.value.contentData(id);
		fetchContentData(item.name);
	}
	
	// 获取课程列表
	const fetchContentData = async(category: any) =>{
		const res = await apiCourseList({
			category:category,
		})
		// console.log(res.lists)
		data.value.contentData = res.lists;
	}
	
		
</script>

<style scoped>
	@import url('../../static/fonts/iconfont.css');
</style>

<style scoped>
.course {
	background: #fff;
}
.course .nav {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fff;
	color: #7e8892;
	position: fixed;
	top: 0;
	left: 0;
}
.course .active {
	color: #000;
	font-size: 38rpx;
}
.course .banner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 320rpx;
	background: #f2f7fa;
	margin-top: 30rpx;
}
.course .banner .banner_img {
	width: 95%;
	height: 270rpx;
	border-radius: 26rpx;
}
/* 课程导航 */
.course .nav2 {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	margin-top: 20rpx;
}
/* 一级导航 */
.nav2_subnav1,.nav2_subnav2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	min-width: 100%;
	height: 90rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
}
/* 去除导航滚动条 */
.nav2_subnav1::-webkit-scrollbar,.nav2_subnav2::-webkit-scrollbar {
	display: none;
}
.nav2_subnavCon {
	flex:0 0 auto;
	padding: 15rpx 20rpx;
	color: #686868;
	background: #f5f8fa;
	border-radius: 10rpx;
	margin-right: 15rpx;
}
/* 导航选中样式 */
.subNavActive {
	color: #fff;
	background: #2c8cfe;
}

/* 课程列表 */
.course .course-list {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #fff;
}
.course .course-list .course-list-li {
	display: flex;
	width: 100%;
	padding: 24rpx 30rpx;
}
.course .course-list .course-list-li .course-list-left {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200rpx;
}
.course .course-list .course-list-li .course-list-left .course-list-img{
	width: 260rpx;
	height: 200rpx;
	border-radius: 18rpx;
}
.course .course-list .course-list-li .course-list-right {
	display: flex;
	flex-direction: column;
	padding-left: 15rpx;
	height: 200rpx;
}
/* 课程列表-主标题 */
.course .course-list .course-list-li .course-list-right .text1 {
	font-size: 29rpx;
}
/* 课程列表-副标题 */
.course .course-list .course-list-li .course-list-right .text2 {
	/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
	font-size: 24rpx;
	color: #959ea9;
	height: 102rpx;
	margin-top: 8rpx;
	/* width: 50%;	 */
}


.course .course-list .course-list-li .course-list-right .course-list-button {
	display: flex;
	font-size: 24rpx;
}
/* 课时按钮 */
.course .course-list .course-list-li .course-list-right .course-list-button .button1 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx;
	border-radius: 10rpx;
	color: #13aeb2;
	background: #e0fffa;
	margin-right: 15rpx;
}
/* 通用课时按钮 */
.course .course-list .course-list-li .course-list-right .course-list-button .button2 {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10rpx;
	color: #f76d2e;
	background: #fff3e8;
	padding: 10rpx;
}
</style>
